<div style="padding:20px;">
    <div id="dituiuser" v-cloak>
        <div style="background:#FFF;padding-top:20px;margin-bottom:10px;padding-left:10px;display:flex;">
            <div style="flex:1;">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="success" @click="search('today')">今天</el-button>
                        <el-button type="warning" @click="search('yesterday')">昨天</el-button>
                    </el-form-item>
                    <el-form-item label="">
                        <el-date-picker
                                v-model="formInline.startTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                        <el-date-picker
                                v-model="formInline.endTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search('yes')">查询</el-button>
                        <el-button @click="search('no')">全部</el-button>
                    </el-form-item>
                </el-form>
            </div>
<!--            <div style="width:200px;text-align: right;padding-right:10px;">-->
<!--                <el-button type="success" @click="addMokeDivShow=true">手动添加陌客</el-button>-->
<!--            </div>-->
        </div>

        <el-empty v-if="tableData.length==0" description="无地推陌客进线数据"></el-empty>
        <el-table v-else :data="tableData" style="width: 100%">
<!--            <el-table-column label="机构名称" >-->
<!--                <template slot-scope="scope">{{scope.row.dl_shopname}}</template>-->
<!--            </el-table-column>-->
            <el-table-column label="活动名称/ID号" width="200">
                <template slot-scope="scope">
                    <div v-if="scope.row.dl_userid>0">陌客ID：<span style="color:#0000FF;">{{scope.row.dl_userid}}</span></div>
                    <div><span style="color:#333;">{{scope.row.dl_activetitle}}</span></div>
                </template>
            </el-table-column>
            <el-table-column label="地推陌客">
                <template slot-scope="scope">
                    <div><span style="color:#333;">{{scope.row.du_truename}}</span></div>
                    <div><span style="color:#66f;font-weight:bold;">{{scope.row.du_mobile}}</span></div>
                    <div>{{scope.row.du_zhmyremark}}</div>
                </template>
            </el-table-column>
            <el-table-column label="进线地址" width="200">
                <template slot-scope="scope">
                    <div v-if="scope.row.dl_inlineaddress!=''"><span style="color:#333;">{{scope.row.dl_inlineaddress}}</span></div>
                    <div v-if="scope.row.dl_inlineaddress==null">未获取</div>
                </template>
            </el-table-column>
            <el-table-column label="派发积分" width="200">
                <template slot-scope="scope">
                    <div>地推专员奖励：<span style="color:#F00;">{{scope.row.dl_dituifen}} 积分</span></div>
                    <div>陌客扫码奖励：<span style="color:#F00;">{{scope.row.dl_kehufen}} 积分</span></div>
                </template>
            </el-table-column>
            <el-table-column label="地推专员" width="200">
                <template slot-scope="scope">
                    <div><span style="color:#333;">{{scope.row.dl_dituiname}}</span></div>
                    <div>{{scope.row.dl_dituimobile}}</div>
                </template>
            </el-table-column>
            <el-table-column label="添加时间" width="200">
                <template slot-scope="scope">
                    <div style="color:#333;">流程：{{scope.row.du_flowid}}</div>
                    <div>{{scope.row.dl_addtime}}</div>
                </template>
            </el-table-column>
<!--            <el-table-column label="操作" width="130">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)">备注</el-button>-->
<!--                </template>-->
<!--            </el-table-column>-->
        </el-table>

        <div style="text-align:right;background:#FFF;padding:20px 0;margin-top:0px;">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="totalItems"
                    :page-size="pageSize"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage">
            </el-pagination>
        </div>

        <el-dialog title="手动添加陌客" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="addMokeDivShow" width="30%">
            <el-form>
                <el-form-item>
                    <el-input v-model="mokeId" placeholder="请输入陌客手机号" maxlength="11" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="mokeName" placeholder="请输入姓名（可不填）" maxlength="12" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addMokeDivShow = false">取 消</el-button>
                <el-button :disabled="butajaxing" type="primary" @click="addMoke">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>

<script>
    var _theData = <?php echo json_encode($data); ?>;
    var _this = null;
    console.log(_theData);
    //alert(BASE_URL+"***"+STORE_URL);
    new Vue({
        el: '#dituiuser',
        data: {
            test:'aaaaaaaaaaaa',
            butajaxing:false,
            mokeId:"",
            mokeName: "",
            formInline: {
                startTime: '',
                endTime: '',
                phone: '',
                remark: '',
                day_str:'',
            },
            addMokeDivShow:false,
            remarkBoxShow:false,
            remarkTxt:'',
            nowDsId:0,
            nowRowCnt:0,
            tableData: _theData.list,
            currentPage: 1,
            pageSize: PAGESIZE,     //PAGESIZE
            totalItems: _theData.allNum // 假设总共有100条记录
        },
        mounted(){
            _this = this;
            //this.loadTableData();
        },
        methods: {
            addMoke(){
                var _this = this;
                var _mokeId = $.trim(this.mokeId);
                var _mokeName = $.trim(this.mokeName);
                if(_mokeId==''){
                    //this.$alert('请输入地推员ID号');
                    this.$message.error('请输入陌客手机号');
                }
                else{
                    const phoneRegex = /^1[3-9]\d{9}$/;
                    if(!(phoneRegex.test(_mokeId))){
                        this.$message.error('手机号码错误');
                    }
                    else{
                        this.butajaxing = true;
                        $.post('/index.php?s=/store/ditui.Dtuser/addmoke', {"mokeMobile": _mokeId, "mokeName":_mokeName}, function (_res) {
                            console.log('aaaaa', _res, _res.code)
                            _this.butajaxing = false;
                            if(_res.code==0){
                                _this.$message.error(_res.msg);
                            }
                            else{
                                _this.$message({
                                    message: _res.data.msg,
                                    type: 'success'
                                });
                                _this.addMokeDivShow = false;
                                _this.mokeId = "";
                                _this.mokeName = "";
                                //重新获取地推人员列表
                                _this.currentPage = 1;
                                _this.search('no');
                            }
                        })
                    }
                }
            },
            search(key) {
                // 这里应该添加逻辑来过滤数据
                // console.log('搜索:', this.formInline);
                if(key=="no"){
                    this.formInline = {startTime: '', endTime: '', phone: '', remark: '', day_str:''};
                }
                if(key=='today'){
                    this.formInline = {startTime: '', endTime: '', phone: '', remark: '', day_str:'today'};
                }
                if(key=='yesterday'){
                    this.formInline = {startTime: '', endTime: '', phone: '', remark: '', day_str:'yesterday'};
                }
                this.currentPage = 1;
                this.loadTableData();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                // 更新当前页码后，重新加载数据
                this.loadTableData();
            },
            loadTableData() {
                $.post('/index.php?s=/store/ditui.Dtuser/inline', {"isAjax":"yes",
                    "currentPage":this.currentPage, "pageSize": this.pageSize,
                    "formInline":this.formInline}, function (_res) {
                    _this.tableData = _res.data.list;
                    _this.totalItems = _res.data.allNum;
                    if(_res.data.begTimeStr!=''){
                        _this.formInline.startTime = _res.data.begTimeStr;
                    }
                    if(_res.data.endTimeStr!=''){
                        _this.formInline.endTime = _res.data.endTimeStr;
                    }
                })
            }
        }
    });
</script>